<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title></title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="/static/mobile/css.css?v=1">
  <link rel="stylesheet" href="/static/mobile/iconfont.css">
  <style>
    .weui-tabbar__item.weui-bar__item--on .weui-tabbar__label,
    .weui-tabbar__item .weui-tabbar__label,
    .weui-tabbar__item i {
      color: #0000ff;
    }

    .icon-right, icon-cuo1 {
      margin: 0 15px;
    }

    .tools {
      background-color: #f2f2f2;
      padding: 10px 0;
    }

    .tools > .trash {
      float: left;
    }

    .tools > div {
      display: inline-block;
    }

    .icon-dui {
      position: absolute;
      left: 40%;
    }

    .icon-Lin {
      position: absolute;
      left: 55%;
    }

    .btn-question-study-wrong {
      border: 1px solid #e6c0cb;
      color: #ff5060;
      background-color: #fee8ea;
    }

    .btn-question-study-right {
      border: 1px solid #abd2de;
      color: #2eade0;
      background-color: #dcf2fd;
    }

    .btn-primary {
      background-color: #e3e7ea;
      color: #a9a9a9;
    }

    .weui-dialog__bd {
      text-align: left;
    }


  </style>
</head>
<body>
<section id="content">
  <div class="cover" v-show="toggleQuestions" @click="hideQuestions"></div>
  <div class="header">
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="placeholder" style="width: 25%;">
          <a href="javascript:window.history.back();" class="fanhui">
            <i class="iconfont icon---" style="float: left; margin-left: 10px;"></i>
          </a>
        </div>
      </div>

      <div class="weui-flex__item"><span class="page-header">顺序练习</span></div>
      <div class="weui-flex__item">
        <div class="placeholder"></div>
      </div>
    </div>
  </div>
  <v-touch class="panel-body" tag="div" v-on:swipeleft="onSwipeLeft()"
           v-on:swiperight="onSwipeRight()">
    <div class="text-question">
      <div class="qType">{{type==0 ? '判断题' : '单选题'}}</div>
      {{content}}
    </div>
    <div class="text-answers" v-for="(item,index) in answers" v-on:click="answerClick(index)"
         v-bind:class="{'text-primary':active==index && !toggleQuestions}">
      <div>{{item}}
        <i class="iconfont green"
           v-bind:class="{'icon-right':(rightAnswer==active && active==index)}"></i>
        <i class="iconfont red"
           v-bind:class="{'icon-cuo1':(rightAnswer!=active && active==index)}"></i>
      </div>
    </div>
  </v-touch>

  <div id="footer">
    <div class="weui-flex tools">
      <div class="weui-flex__item">
        <span @click="clearQuestion" style="margin-left: 20px;"><i class="iconfont icon-laji"
                                                                   style="margin-right: 2px;"></i>清空</span>
      </div>
      <div class="weui-flex__item" style="text-align: center">
        <i class="iconfont icon-dui green">&nbsp;{{rightCount}}</i>
        <i class="iconfont icon-Lin red">&nbsp;{{wrongCount}}</i>
      </div>
      <div class="weui-flex__item">
        <div style="float: right;margin-right: 10px;">
          <a @click="hideQuestions"><i class="iconfont icon-liebiao"></i>&nbsp;<strong>{{cursor+1}}</strong> /
            {{questionTotal}}</a>
        </div>
      </div>
    </div>
    <div class="btn-questions" v-show="toggleQuestions">
      <div style="text-align: center">
        <div class="btn-question-study" v-for="(item,index) in cursors"
             v-bind:class="{'btn-question-study-right':paperSign[index]==1
           ,'btn-question-study-wrong':paperSign[index]==2
           ,'active':(cursor==index)
           }"
             v-on:click="getQuestion(index)">{{item}}
        </div>
      </div>


    </div>

  </div>
</section>

<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script src="/static/mobile/vue-touch.min.js"></script>
<script src="/static/mobile/main.js"></script>

<script>
  Vue.use(VueTouch, {name: 'v-touch'});
  var content = new Vue({
    el: "#content",
    data: {
      nowTimestamp: 0, //当前时间戳
      cursorMax: 0, //最大游标
      content: '',  //问题
      answers: [],  //答案
      cursor: 0, //当前游标
      cursors: 0, //所有游标，用于分页
      active: -1,
      lastActive: -1,
      paperAnswers: [],
      paperQuestions: [],
      paperQuestionIDs: [],
      paperSign: [],
      rightAnswerChr: '',
      rightAnswer: -1,
      questionTotal: 0,
      questionDo: 0,
      checked: [],
      rightData: [],
      wrongData: [],
      toggleQuestions: false,
      type: 0,
      rightAnswers: {},
      signs: {},
      rightCount: 0,
      wrongCount: 0

    },
    created: function () {
      var that = this;
      js_request('/portal/study/view', {}, function (result) {
        var id, cursor;
        if (result.code == 0) {
          $.toast(result.msg, "forbidden");
          return false;
        }
        that.paperQuestions = JSON.parse(result.data.questions);
        that.paperQuestionIDs = JSON.parse(result.data.questionIDs);
        that.nowTimestamp = result.data.nowTimestamp;
        that.nowTime = result.data.nowTime;
        that.cursors = JSON.parse(result.data.cursors);
        that.cursorMax = result.data.cursorMax;
        that.cursor = result.data.cursor;
        that.questionTotal = that.paperQuestionIDs.length;

        try {
          that.paperAnswers = JSON.parse(result.data.answers);
          that.paperSign = JSON.parse(result.data.signs);
          that.countRightWrong();
        } catch (error) {
        }

        
        //
        cursor = that.cursor;
        id = that.paperQuestionIDs[cursor];
        that.content = that.paperQuestions[id].content;
        that.type = that.paperQuestions[id].type;
        that.answers = JSON.parse(that.paperQuestions[id].answers);
      });
    },
    watch: {},
    methods: {
      fanhui: function () {
        window.history.back();
      },
      onSwipeLeft: function () {
        this.nextQuestion();
      },
      onSwipeRight: function () {
        this.lastQuestion();
      },
      hideQuestions: function () {
        this.toggleQuestions = !this.toggleQuestions;
      },
      clearQuestion: function () {
        var that = this;
        var rightCount = this.rightCount;
        var wrongCount = this.wrongCount;
        var total = rightCount + wrongCount;
        $.confirm({
          title: '警告',
          text: '您一共做了' + total + '题，正确' + rightCount + '题，错误' + wrongCount + '题，确定要清空记录吗？',
          onOK: function () {
            $.post("/portal/study/clearAnswer", {}, function (result) {
              if (result && result.code == 1) {
                $.toast('清空成功', function () {
                  that.paperAnswers = [];
                  that.paperSign = [];
                  that.rightData = [];
                  that.wrongData = [];
                  that.wrongCount = 0;
                  that.wrongCount = 0;
                  that.cursor = 0;
                  window.location.reload();
                });
              } else {
                $.toast(result ? result.msg : '网络错误');
              }
            });

          },
          onCancel: function () {
          }
        });
        return false;
      },
      answerClick: function ($index) {
        var that = this;
        var cursor = this.cursor;
        var id;
        var next = false;
        var sign;
        var count = [];
        if (this.active == $index || this.toggleQuestions)
          return false;
        id = that.paperQuestionIDs[cursor];
        that.paperAnswers[cursor] = $index;
        that.active = $index;
        that.rightAnswer = that.paperQuestions[id].right;
        that.rightAnswerChr = String.fromCharCode(that.rightAnswer + 65);

        if (that.paperQuestions[id].right == $index) {
          sign = that.paperSign[cursor] = 1;
        } else {
          sign = that.paperSign[cursor] = 2;
        }
        that.countRightWrong();
        $.post("/portal/study/doanswer", {
          "cursor": cursor,
          'answer': $index,
          "sign": sign
        }, function (result) {

        })
        
      },
      countRightWrong: function () {
        var that = this, signs = that.paperSign;
        var right = 0, wrong = 0;
        for (var i in signs) {
          if (signs[i] == 1) right += 1;
          if (signs[i] == 2) wrong += 1;
        }
        that.rightCount = right;
        that.wrongCount = wrong;
      },
      getQuestion: function (cursor) {
        var that = this;
        var nowCusor = this.cursor;
        var active = this.active;
        var id = that.paperQuestionIDs[cursor];
        if (cursor == this.cursor) return false;

        that.content = that.paperQuestions[id].content;
        that.answers = JSON.parse(that.paperQuestions[id].answers);
        that.active = that.paperAnswers[cursor];
        that.cursor = cursor;
        that.type = that.paperQuestions[id].type;

      },
      nextQuestion: function (e) {
        var that = this;
        if (this.cursor > this.cursorMax) {
          $.toast("已经是最后一条数据了", "forbidden");
          return false;
        }

        $(".panel-body").fadeOut('fast', function () {
          that.getQuestion(that.cursor + 1);
          $(".panel-body").fadeIn('slow')
        });


      },
      lastQuestion: function (e) {
        var that = this;
        if (this.cursor <= 0) {
          $.toast("已经是第一条数据了", "forbidden");
          return false;
        }
        $(".panel-body").fadeOut('fast', function () {
          that.getQuestion(that.cursor - 1);
          $(".panel-body").fadeIn('slow')
        });
      }
    },
  });
</script>
</body>
</html>